<template>
  <div class="header-container">
    <Card :data="cards.card1">
      <!-- 数据浏览 -->
      <div class="data-view">
        <p>同月比 <span>2.33%</span><i class="iconfont icon-arrow" :class="{ down: !isLastDayGrow }"></i></p>
        <p>同日比 <span>4.14%</span><i class="iconfont icon-arrow" :class="{ down: !isLastMonthGrow }"></i></p>
      </div>
      <template #footer>
        <div class="footer-slot">
          <div>昨日销售额 ￥{{ list.salesLastDay }}</div>
        </div>
      </template>
    </Card>

    <Card :data="cards.card2">
      <!-- 图表1 -->
      <v-chart class="chart" :option="option1"></v-chart>
      <template #footer>
        <div class="footer-slot">
          <div>昨日订单数 {{ list.orderLastDay }}</div>
        </div>
      </template>
    </Card>

    <Card :data="cards.card3">
      <!-- 图表2 -->
      <v-chart class="chart" :option="option2"></v-chart>
      <template #footer>
        <div class="footer-slot">
          <div>退货率 {{ list.returnRate }}%</div>
        </div>
      </template>
    </Card>

    <Card :data="cards.card4">
      <!-- 进度条 -->
      <div class="background-bar" style="width: 100%; height: 10px; background-color: #ccc">
        <i class="iconfont icon-arrow arrow1" :style="`left:${progressBar}%`"></i>
        <div class="value-bar" :style="`width:${progressBar}% ; height: 10px; background-color: green`"></div>
        <i class="iconfont icon-arrow arrow2" :style="`left:${progressBar}%`"></i>
      </div>

      <template #footer>
        <div class="footer-slot">
          <div class="data-view2">
            <span>同月比 <span>2.33%</span><i class="iconfont icon-arrow" :class="{ down: !isLastDayGrow }"></i></span>
            <span>同日比 <span>4.14%</span><i class="iconfont icon-arrow" :class="{ down: !isLastMonthGrow }"></i></span>
          </div>
        </div>
      </template>
    </Card>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import axios from 'axios';

import Card from '@/components/Card.vue';

const list = ref('');
const progressBar = ref(0);
const isLastDayGrow = ref(true);
const isLastMonthGrow = ref(true);

const cards = ref({
  card1: { title: '累计销售额', data: list.value.salesToday },
  card2: { title: '累计订单额', data: list.value.orderToday },
  card3: { title: '今天用户交易数', data: '30' },
  card4: { title: '累计用户数', data: list.value.totalUser },
});

//订单图表配置
const option1 = ref({
  xAxis: {
    type: 'category',
    show: false,
    boundaryGap: false,
  },
  yAxis: {
    type: 'value',
    show: false,
  },
  grid: {
    left: 0,
    right: 0,
    top: 0,
    bottom: 0,
  },
  series: [
    {
      type: 'line',
      data: [123, 124, 221, 231, 132],

      areaStyle: {
        color: 'purple',
      },
      itemStyle: {
        opacity: 0,
      },
      lineStyle: {
        opacity: 0,
      },
      smooth: true,
    },
  ],
});

//用户图表配置
const option2 = ref({
  xAxis: {
    type: 'category',
    show: false,
  },
  yAxis: {
    type: 'value',
    show: false,
  },
  grid: {
    left: 0,
    right: 0,
    top: 0,
    bottom: 0,
  },
  series: [
    {
      type: 'bar',
      data: [],
    },
  ],
});

//异步获取数据
axios.get('http://project.x-zd.net:3001/apis/reportdata').then((res) => {
  list.value = res.data;
  console.log('数据获取成功');

  // 更新cards
  cards.value = {
    card1: { title: '累计销售额', data: list.value.salesToday },
    card2: { title: '累计订单额', data: list.value.orderToday },
    card3: { title: '今天用户交易数', data: '30' },
    card4: { title: '累计用户数', data: list.value.totalUser },
  };

  // 更新图表数据
  option1.value.series[0].data = list.value.orderTrend;
  option2.value.series[0].data = list.value.orderUserTrend;

  // 更新进度条
  progressBar.value = list.value.totalUser / 10000;

  // 增跌判定
  list.value.salesGrowLastDay < 0 ? (isLastDayGrow.value = false) : (isLastDayGrow.value = true);
  list.value.salesGrowLastMonth < 0 ? (isLastMonthGrow.value = false) : (isLastMonthGrow.value = true);
});
</script>

<style scoped>
@import 'http://at.alicdn.com/t/c/font_4989155_dx0p4v9x3or.css';

.header-container {
  display: flex;
  padding: 10px;
  justify-content: space-between;
  width: 1200px;
}

.footer-slot {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-top: 1px solid #ccc;
}
.footer-slot div {
  padding-top: 5px;
  font-size: 12px;
}

.data-view p {
  font-size: 10px;
}

.data-view p span {
  margin-left: 8px;
  font-weight: bold;
}
.icon-arrow {
  display: inline-block;
  font-size: 12px;
  color: green;
  transform: rotate(180deg);
}

.down {
  color: brown;
  transform: rotate(0deg);
}

.background-bar {
  position: relative;
}

.arrow1 {
  position: absolute;
  top: -12px;
  left: 0px;
  transform: translateX(-50%);
}

.arrow2 {
  position: absolute;
  left: 0;
  transform: rotate(180deg) translateX(50%);
}

.data-view2 {
  display: flex;
  align-items: center;
}
</style>
